<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>三角箭头式时间条</title>
  <style>
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body {
      width: 1000px;
    }


    /* time line */

    .time_line {
      padding: 35px 0 30px 0;
      position: relative;
    }


    /* time_line default */

    .time_line a {
      position: relative;
      display: inline-block;
      margin-right: -15px;
      cursor: initial !important;
    }

    .time_line a:nth-of-type(1) em:nth-of-type(1) {
      border-color: #f1f1f1;
    }

    .time_line a:nth-last-of-type(1) em:nth-of-type(2) {
      border-color: #f1f1f1;
    }

    .time_line em:nth-of-type(1) {
      width: 0;
      height: 0;
      border-width: 14px;
      border-color: transparent transparent transparent #fff;
      font-size: 0;
      line-height: 0;
      border-style: solid dashed dashed;
      float: left;
      position: absolute;
      left: 0;
    }

    .time_line em:nth-of-type(2) {
      width: 0;
      height: 0;
      border-width: 14px;
      border-color: transparent transparent transparent #f1f1f1;
      font-size: 0;
      line-height: 0;
      border-style: solid dashed dashed;
      position: absolute;
      right: -14px;
      z-index: 10;
    }

    .time_line span {
      background: #f1f1f1;
      line-height: 28px;
      float: left;
      text-align: center;
      color: #999;
      font-size: 12px;
    }

    .time_line i {
      color: #F04F43;
      font-size: 12px;
    }


    /* time */

    .time_line ul li {
      width: 25%;
      float: left;
      text-align: center;
      padding-top: 11px;
      font-size: 12px;
      color: #999;
    }


    /* active */

    .time_line a.active em:nth-of-type(2) {
      border-color: transparent transparent transparent #ffefee;
    }

    .time_line a.active span {
      background: #ffefee;
      color: #666;
    }

    .time_line a:nth-of-type(1).active em:nth-of-type(1) {
      border-color: #ffefee;
    }

    .time_line a:nth-last-of-type(1).active em:nth-of-type(2) {
      border-color: #ffefee;
    }


    /* 2 */

    .time_line.arrowTwo a {
      width: 504px;
    }

    .time_line.arrowTwo span {
      width: 490px;
    }

    .time_line.arrowTwo ul li {
      width: 50%;
    }


    /* 4 */

    .time_line.arrowFour a {
      width: 257px;
    }

    .time_line.arrowFour span {
      width: 243px;
    }

    .time_line.arrowFour ul li {
      width: 25%;
    }


    /* 5 */

    .time_line.arrowFive a {
      width: 208px;
    }

    .time_line.arrowFive span {
      width: 194px;
    }

    .time_line.arrowFive ul li {
      width: 20%;
    }


    /* sprite line */

    .sprite_line:after {
      position: absolute;
      bottom: 0;
      left: -20px;
      right: -20px;
      height: 1px;
      content: '';
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
      background-color: #eee;
    }
  </style>
</head>

<body>
  <!-- arrowTwo -->
  <div class="time_line arrowTwo cf">
    <a class="active">
      <em></em>
      <span>提交订单</span>
      <em></em>
    </a>
    <a class="active">
      <em></em>
      <span>交易关闭</span>
      <em></em>
    </a>
    <ul>
      <li>
        2018-04-09 09:16:00
      </li>
      <li>
        2018-04-16 09:16:00
      </li>
    </ul>
  </div>
  <!-- arrowFour -->
  <div class="time_line arrowFour cf">
    <a class="active">
      <em></em>
      <span>提交订单</span>
      <em></em>
    </a>
    <a>
      <em></em>
      <span>支付订单</span>
      <em></em>
    </a>
    <a>
      <em></em>
      <span>商品发货</span>
      <em></em>
    </a>
    <a>
      <em></em>
      <span>交易完成</span>
      <em></em>
      <p></p>
    </a>
    <ul>
      <li>
        2018-04-09 09:16:00
      </li>
    </ul>
  </div>
  <!-- arrowFive -->
  <div class="time_line arrowFive cf">
    <a class="active">
      <em></em>
      <span>提交订单</span>
      <em></em>
    </a>
    <a>
      <em></em>
      <span>支付订单</span>
      <em></em>
    </a>
    <a>
      <em></em>
      <span>商家确认</span>
      <em></em>
    </a>
    <a>
      <em></em>
      <span>商家发货</span>
      <em></em>
      <p></p>
    </a>
    <a>
      <em></em>
      <span>交易完成</span>
      <em></em>
      <p></p>
    </a>
    <ul>
      <li>
        2018-04-09 09:16:00
      </li>
    </ul>
  </div>
</body>

</html>